<script setup lang="ts">
import { registerDevice } from '@/api/device';
import type { DeviceInfo } from '@/api/device/type';
import type { Result } from '@/utils/request';
import { ElMessage } from 'element-plus';
import { ref, type Ref } from 'vue';

const dialogVisible = defineModel() as Ref<boolean>;
const formData = ref({} as DeviceInfo);
const emit = defineEmits(["update"]);
const onSubmit = () => {
    registerDevice(formData.value).then((res) => {
        const {msg} = res as Result;
        ElMessage({
            message: msg,
            type: 'success'
        });
        dialogVisible.value = false;
        emit("update");
    })
}
</script>

<template>
    <div>
        <el-dialog v-model="dialogVisible" width="500">
            <div>
                <el-form
                    label-width="auto"
                    :model="formData"
                    style="max-width: 600px"
                >
                    <el-form-item label="机器名">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: space-between;
}
</style>